Ad/persistent menu mouseover #35566

Robert-Costello · 2024-12-30T21:14:55Z

Product Description

This makes it so that the persistent nav sidebar pops open as an overlay when the user hovers over the collapsed menu.
The menu can be locked open which will do two things.
1: it will fit the nav menu inline with the other elements on the page (no longer an overlay).
2: the nav menu will continue to be expanded as the user navigates between menus.

Technical Summary

Jira ticket for mouseover
In order to have have a transition for the expanding and collapsing you need to know the width the menu will be when expanded. To accomplish this setPersistantMenuRegionWidth sets up invisible clones of the elements that make up the nav menu and stores that value in sessionStorage so that it only needs to be calculated once per session. The value, persistantMenuRegionWidth, is reset when the page is initialized.
I looked at the possibility of using a css calc to determine the width, but I don't think that will work. The width will depend on the text content of the menu and the elements need to be appended to the DOM in order to get the correct width.
I'm pretty happy with the current approach, but open to other suggestions.

Jira ticket for defaulting nav menu to closed when split screen case search is on.

Feature Flag

persistent_menu_setting

Safety Assurance

Safety story

tested locally and on staging

changes are limited to this feature flag and the only risk I can see is undesirable ui on the persistent men nav bar.

Automated test coverage

QA Plan

no QA planned

Rollback instructions

This PR can be reverted after deploy with no further considerations

Labels & Review

Risk label is set correctly
The set of people pinged as reviewers is appropriate for the level of risk of the change

MartinRiese

One other thing I noticed in the screen shot is that the content of the menu wraps while it is shrinking. I think it would look better if the number of lines does not change during the transition. But I am not sure how hard that would be.

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/views.js

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

Robert-Costello · 2024-12-31T22:29:54Z

I think it would look better if the number of lines does not change during the transition. But I am not sure how hard that would be.

I agree with this. I'm not sure about how hard it would be either, but I'll give it a go.

...turns out it was incredibly easy 5c682d3

Jtang-1

Very nice change, the animation is great! Nit if it's easy to implement - what do you thinking about not having the "opening" animation during navigation if the sidebar is already persistently opened?

Robert-Costello · 2025-01-02T21:33:50Z

Very nice change, the animation is great! Nit if it's easy to implement - what do you thinking about not having the "opening" animation during navigation if the sidebar is already persistently opened?

Thanks! I think that's a good idea. I'll take a stab at it. I don't think it'll be too big of a lift.

...changed here 0346101

Jtang-1

just a couple comments

Jtang-1 · 2025-01-03T23:44:05Z

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

+            const contentPlusContainer = $('#content-plus-persistent-menu-container');
+
+            const persistentMenuRegionClone = $('#persistent-menu-region').clone();
+            persistentMenuRegionClone.attr("id","pmr-clone");


what's the purpose of adding these ids?

originally the ids were intended to make sure that there weren't cloned elements floating around that would be difficult to search for/trouble shoot. The clones are being removed immediately, so I can see the argument that giving them ids isn't strictly necessary at this point. I'm on the fence about whether it's better to skip adding the ids. I could be swayed either way.

If there's no use for it now, my preference would be to delete it to remove the chance of confusion of what its purpose is.

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

…hen user leaves app

Jtang-1

Changes make sense to me. Making the clone to get the width seems a bit hacky but I don't know of a better way to do it. Would be nice to get thoughts from someone more adept at frontend

corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss

…ext to wrap while keeping the text from jumping during transition

orangejenny · 2025-01-08T17:52:25Z

Making the clone to get the width seems a bit hacky but I don't know of a better way to do it.

FWIW, I think this is a normal/appropriate level of hackiness.

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss

…bs and persistent menu nav should work together while both are available.

…to avoid doubled border. otherwise there is a right border and no top border which looks strange

…if needed

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js

catch up to base branch

AddisonDunn and others added 10 commits December 16, 2024 09:44

WIP

ddb1971

add method to get width for animation

aefba48

use new method for animation and incorporate sessionStorage

183e18c

use consts and a little cleanup

81f5b4e

tweak styling

dd993b6

make region relative to stabalize button position

fcd390b

add fetch method

2a6bf8e

make widths dynamic

1d0149a

use consts

5add15d

style tweak and remove comments

bb1c3cd

dimagimon added the Risk: Medium Change affects files that have been flagged as medium risk. label Dec 30, 2024

Robert-Costello added 3 commits December 30, 2024 16:25

lint

2a41d1e

fix bootstrap diff

0a849df

Bootstrap 5 Migration - Rebuilt diffs

d9ce94a

Robert-Costello requested review from a team, MartinRiese, AddisonDunn and minhaminha and removed request for a team December 31, 2024 18:08

Robert-Costello marked this pull request as ready for review December 31, 2024 18:08

Robert-Costello requested review from orangejenny, biyeun, stephherbers, Jtang-1 and nospame as code owners December 31, 2024 18:08

Robert-Costello added 3 commits December 31, 2024 14:11

hide nav region on home screen

c91259a

default nav menu to closed when sccs is on and reset when nav to home

7c9c5f8

lint

e66383d

MartinRiese reviewed Dec 31, 2024

View reviewed changes

Jtang-1 reviewed Jan 2, 2025

View reviewed changes

Robert-Costello added 2 commits January 2, 2025 17:09

no transition if menu is locked

0346101

maintain transition when collapsing menu after navigating with menu

ee5de16

Jtang-1 reviewed Jan 4, 2025

View reviewed changes

Robert-Costello added 3 commits January 6, 2025 15:24

calculate nav menu width only once after initialized. re-calculated w…

970b7f7

…hen user leaves app

remove unused args

9b368ea

remove unused method

239c787

Jtang-1 approved these changes Jan 6, 2025

View reviewed changes

corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html Show resolved Hide resolved

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss Outdated Show resolved Hide resolved

Robert-Costello added 6 commits January 8, 2025 12:25

have text wrap and add padding to give room for arrow button

89c468a

add listener to show contents after expand transistion. This allows t…

e2aa510

…ext to wrap while keeping the text from jumping during transition

make sure contents are shown on first load of menu

0f85b57

keep menu drop-downs above persitsent menu nav

64a1e97

add var for arrow

fcc104a

lint

63fb0db

"Bootstrap 5 Migration - Rebuilt diffs"

1ee3437

Jtang-1 reviewed Jan 8, 2025

View reviewed changes

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js Show resolved Hide resolved

corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/navigation.scss Outdated Show resolved Hide resolved

orangejenny and others added 4 commits January 9, 2025 12:48

Merge branch 'master' into ad/persistent-menu-mouseover

ffb126e

hide menu region when user navigates home with breadcrumbs .breadcrum…

5b2b51c

…bs and persistent menu nav should work together while both are available.

add border top when there are cloudcare notifications, if not remove …

a1b3dc5

…to avoid doubled border. otherwise there is a right border and no top border which looks strange

check for cloudcare notifications on first render and add border top …

5422c2e

…if needed

Jtang-1 approved these changes Jan 9, 2025

View reviewed changes

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js Outdated Show resolved Hide resolved

Robert-Costello added 4 commits January 10, 2025 11:56

fix indent

61a75ae

add var for hq nav bar z-index

27ff004

"Bootstrap 5 Migration - Rebuilt diffs"

0c1b9f6

Merge branch 'master' into ad/persistent-menu-mouseover

c1dbed4

catch up to base branch

Jtang-1 approved these changes Jan 10, 2025

View reviewed changes

Robert-Costello merged commit b952a5c into master Jan 10, 2025
12 checks passed

Robert-Costello deleted the ad/persistent-menu-mouseover branch January 10, 2025 19:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ad/persistent menu mouseover #35566

Ad/persistent menu mouseover #35566

Robert-Costello commented Dec 30, 2024 •

edited

Loading

MartinRiese left a comment

Robert-Costello commented Dec 31, 2024 •

edited

Loading

Jtang-1 left a comment

Robert-Costello commented Jan 2, 2025 •

edited

Loading

Jtang-1 left a comment •

edited

Loading

Jtang-1 Jan 3, 2025

Robert-Costello Jan 6, 2025

Jtang-1 Jan 6, 2025

Jtang-1 left a comment

orangejenny commented Jan 8, 2025

Ad/persistent menu mouseover #35566

Ad/persistent menu mouseover #35566

Conversation

Robert-Costello commented Dec 30, 2024 • edited Loading

Product Description

Technical Summary

Feature Flag

Safety Assurance

Safety story

Automated test coverage

QA Plan

Rollback instructions

Labels & Review

MartinRiese left a comment

Choose a reason for hiding this comment

Robert-Costello commented Dec 31, 2024 • edited Loading

Jtang-1 left a comment

Choose a reason for hiding this comment

Robert-Costello commented Jan 2, 2025 • edited Loading

Jtang-1 left a comment • edited Loading

Choose a reason for hiding this comment

Jtang-1 Jan 3, 2025

Choose a reason for hiding this comment

Robert-Costello Jan 6, 2025

Choose a reason for hiding this comment

Jtang-1 Jan 6, 2025

Choose a reason for hiding this comment

Jtang-1 left a comment

Choose a reason for hiding this comment

orangejenny commented Jan 8, 2025

Robert-Costello commented Dec 30, 2024 •

edited

Loading

Robert-Costello commented Dec 31, 2024 •

edited

Loading

Robert-Costello commented Jan 2, 2025 •

edited

Loading

Jtang-1 left a comment •

edited

Loading